<script setup>
import PathBreadcrumb from "../components/PathBreadcrumb.vue";
import ProductSwiper from "../components/ProductSwiper.vue";
import { ShoppingTrolley } from "@element-plus/icons-vue";
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { getProductInfo } from "@/http/api/productApi"

const baseUrl = import.meta.env.VITE_APP_BASE_URL;

const route = useRoute();
const productId = ref(route.params.id);
const productInfo = ref(null);

const activeNames = ref(["1"]);
const inputNum = ref(1);

const fetchProductInfo = () => {
  getProductInfo(productId.value).then(value => {
    productInfo.value = value.data;
    console.log("请求产品详情成功", productInfo.value);
  }).catch(error => {
    console.log("请求产品详情失败", error);
  });
}

const getImageUrl = (url) => {
  return baseUrl + url;
}

watchEffect(() => {
  console.log("router product id", productId.value);
  fetchProductInfo();
});
</script>
<template>
  <PathBreadcrumb></PathBreadcrumb>
  <div class="product-container">
    <div class="left-side">
      <div class="product-img">
        <img :src="getImageUrl(productInfo.picPathList[0])" alt="" />
      </div>
      <div class="sizes-box">
        <h3 class="size-h">size</h3>
        <div class="size-list">
          <span class="size-item active">XXS</span>
          <span class="size-item">XS</span>
          <span class="size-item">S</span>
          <span class="size-item">M</span>
          <span class="size-item">L</span>
          <span class="size-item">XL</span>
          <span class="size-item">XXL</span>
          <span class="size-item">XXXL</span>
        </div>
      </div>
      <el-collapse class="collapse" v-model="activeNames">
        <el-collapse-item title="Product Details" name="1">
          <div>
            Premium fabric cut into a great fitting. Original patterns & prints.
            Pair with a dress shirt to complete the look.
          </div>
        </el-collapse-item>
        <el-collapse-item title="Customer Reviews" name="2">
          <div class="comment-list">
            <div class="comment-item" v-for="item in 4" :key="item">
              <div class="top-rate">
                <div class="user-rate">
                  <el-rate />
                  <span class="create-time">22/03/2023</span>
                </div>
                <span class="user-name">Evelyn Smith</span>
              </div>
              <p class="comment-text">
                I don't know how I went so long without this item.
              </p>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="right-side affix-container">
      <el-affix target=".affix-container" :offset="100">
        <el-card class="right-card">
          <h3 class="product-name">{{ productInfo.productName }}</h3>
          <p class="product-price">$373.75</p>
          <div class="product-rate">
            <el-rate />
            <span class="rate-num">(12)</span>
          </div>
          <div class="add-card">
            <el-input-number v-model="inputNum" size="large" />
            <el-button class="add-btn" color="#15803d" size="large">
              <el-icon size="24px">
                <ShoppingTrolley />
              </el-icon>
              <span>Add to cart</span>
            </el-button>
          </div>
          <div class="service-list">
            <div class="list-item" v-for="item in 3" :key="item">
              <el-icon size="16px">
                <ShoppingTrolley />
              </el-icon>
              <span class="item-desc">Free shipping, arrives by Thu, Apr 7. Want it faster? Add an
                address to see options</span>
            </div>
          </div>
        </el-card>
      </el-affix>
    </div>
  </div>
  <div style="padding: 0 10px">
    <h4 class="recommend-h">Recommended with this product</h4>
    <ProductSwiper></ProductSwiper>
  </div>
</template>

<style lang="scss" scoped>
.product-container {
  display: flex;
  margin-bottom: 90px;

  .left-side {
    width: 86rem;

    .product-img {
      height: 60rem;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        min-width: 100%;
        min-height: 100%;
        object-fit: contain;
      }
    }

    .sizes-box {
      margin-top: 32px;
      padding: 20px 10px;
      border-top: 1px solid #e5e7eb;

      .size-h {
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
      }

      .size-list {
        display: flex;
        flex-wrap: wrap;

        .size-item {
          margin: 0 8px 8px 0;
          height: 32px;
          padding: 0 18px;
          line-height: 32px;
          font-size: 14px;
          border-radius: 16px;
          border: 1px solid #e5e7eb;
          cursor: pointer;

          &.active {
            border: 1px solid #15803d;
          }
        }
      }
    }

    .collapse {
      :deep(.el-collapse-item) {
        padding: 20px 4px 20px 10px;
        border-bottom: 1px solid #e5e7eb;
      }

      :deep(.el-collapse-item__header) {
        font-size: 24px;
        font-weight: 700;
        border-bottom: 0;
      }

      :deep(.el-collapse-item__wrap) {
        border-bottom: 0;
      }

      :deep(.el-collapse-item__content) {
        padding-bottom: 0;
      }
    }

    .comment-item {
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      margin-bottom: 16px;

      .top-rate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #71717a;
        font-size: 12px;

        .user-rate {
          display: flex;
          align-items: center;

          .create-time {
            margin-left: 4px;
          }
        }

        .user-name {
          margin-right: 8px;
        }
      }

      .comment-text {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 28px;
      }
    }
  }

  .right-side {
    margin-left: 20px;
    flex: 1;
  }
}

.recommend-h {
  margin: 16px 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

.right-card {
  .product-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }

  .product-price {
    margin: 4px 0 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    color: #6131dd;
  }

  .product-rate {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #71717a;
  }

  .add-card {
    display: flex;
    margin: 10px 0;
    padding: 16px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;

    .add-btn {
      margin-left: 10px;
      flex: 1;
    }
  }
}

.service-list {
  .list-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    .item-desc {
      margin-left: 8px;
      flex: 1;
      line-height: 20px;
      font-size: 14px;
      color: #71717a;
    }
  }
}
</style>
